<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue test</title>
    <style type="text/css">
    body {
        font-family: Helvetica Neue, Arial, sans-serif;
        font-size: 14px;
        color: #444;
    }
    
    table {
        border: 2px solid #42b983;
        border-radius: 3px;
        background-color: #fff;
    }
    
    th {
        background-color: #42b983;
        color: rgba(255, 255, 255, 0.66);
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -user-select: none;
    }
    
    td {
        background-color: #f9f9f9;
    }
    
    th,
    td {
        min-width: 120px;
        padding: 10px 20px;
    }
    
    th.active {
        color: #fff;
    }
    
    th.active .arrow {
        opacity: 1;
    }
    
    .arrow {
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 0;
        margin-left: 5px;
        opacity: 0.66;
    }
    
    .arrow.asc {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid #fff;
    }
    
    .arrow.dsc {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #fff;
    }
    
    #search {
        margin-bottom: 10px;
    }
    </style>
</head>

<body>
    <div id="demo">
        <p>{{message|lowercase|capitalize}}</p>
        <input v-model="message">
        <button v-on:click="reverseMessage">Reverse Message</button>
        <ul>
            <li v-for="todo in todos" track-by="$index">
                {{todo.id}}&nbsp;{{todo.text}}
            </li>
        </ul>
    </div>
    <div id="app">
        <input v-model="newTodo" v-on:keyup.enter="addTodo">
        <ul>
            <li v-for="todo in todos">
                <span>{{todo.text}}</span>
                <button v-on:click="removeTodo($index)">X</button>
            </li>
        </ul>
        <p>a={{a}} b={{b}}</p>
    </div>
    <div id="mount-point"></div>
    <!--过滤表格-->
    <!-- component template -->
    <template type="text/x-template" id="grid-template">
        <table>
            <thead>
                <tr>
                    <th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}">
                        {{key | capitalize}}
                        <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
              </span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="
            entry in data
            | filterBy filterKey
            | orderBy sortKey sortOrders[sortKey]">
                    <td v-for="key in columns">
                        {{entry[key]}}
                    </td>
                </tr>
            </tbody>
        </table>
    </template>
    <div id="table-example">
        <form id="search">
            Search
            <input name="query" v-model="searchQuery">
        </form>
        <demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
        </demo-grid>
    </div>
    <!--过滤表格-->
</body>
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
<!-- demo root element -->

</html>